<template>
  <div class="home">
    <div class="top_box">
      <div
        class="top_item"
        :class="activceIndex == 0 ? 'activeImg' : ''"
        @click="changeItem(0)"
      >
        <img src="@/assets/home/note.svg" alt="" />
        &nbsp;&nbsp;&nbsp;模拟机检查-EBT
      </div>
      <div
        class="top_item"
        :class="activceIndex == 1 ? 'activeImg' : ''"
        @click="changeItem(1)"
      >
        <img src="@/assets/home/plain.svg" alt="" />
        &nbsp;&nbsp;&nbsp;模拟机训练-EBT
      </div>
      <div
        class="top_item"
        :class="activceIndex == 2 ? 'activeImg' : ''"
        @click="changeItem(2)"
      >
        <img src="@/assets/home/note.svg" alt="" />
        &nbsp;&nbsp;&nbsp;模拟机检查-传统
      </div>
      <div
        class="top_item"
        :class="activceIndex == 3 ? 'activeImg' : ''"
        @click="changeItem(3)"
      >
        <img src="@/assets/home/plain.svg" alt="" />
        &nbsp;&nbsp;&nbsp;模拟机训练-传统
      </div>
    </div>
    <div v-if="activceIndex == 0 || activceIndex == 1" class="jobTabs">
      <van-tabs
        v-model:active="active"
        shrink
        line-width="80px"
        line-height="10px"
        background="#161731"
        title-active-color="#fff"
      >
        <van-tab title="代办工作单">
          <div class="jobTabs_Body">
            <van-search
              v-model="value"
              shape="square"
              placeholder="请输入关键字1"
              background="#273062"
            />
            <div class="jobTabs_Body_list">
              <van-cell-group
                v-for="(_, index) in 10"
                :key="index"
                inset
                class="custom-cell-group"
              >
                <div class="jobTabs_Body_list_item">
                  <van-cell>
                    <template #title>
                      <div class="custom-titleBox">
                        <img src="@/assets/home/onlyPlain.svg" alt="" />
                        <span class="custom-title1">
                          2025年737上半年模拟机复训
                        </span>
                        <span class="custom-title2">
                          训练日期：2024-12-21 9:00～13:00
                        </span>
                      </div>
                    </template>
                  </van-cell>
                  <van-cell center>
                    <template #title>
                      <div class="custom-valueBox">
                        <div class="custom-valueBox">
                          训练类型：飞行模拟机训
                        </div>
                        <div class="custom-valueBox">型别等级：F300</div>
                        <div class="custom-valueBox">学员：张三、李四</div>
                        <div class="custom-valueBox">技术标准：副驾驶F1</div>
                      </div>
                    </template>
                    <template #right-icon>
                      <div class="custom-valueButton" @click="gotoAssess">
                        去评估->
                      </div>
                    </template>
                  </van-cell>
                </div>
              </van-cell-group>
            </div>
          </div>
        </van-tab>
        <van-tab title="已办工作单">
          <div class="jobTabs_Body">
            <van-search
              v-model="value"
              shape="square"
              placeholder="请输入关键字2"
              background="#273062"
            />
            <div class="jobTabs_Body_list">
              <van-cell-group
                v-for="(_, index) in 10"
                :key="index"
                inset
                class="custom-cell-group"
              >
                <div class="jobTabs_Body_list_item">
                  <van-cell>
                    <template #title>
                      <div class="custom-titleBox">
                        <img src="@/assets/home/onlyPlain.svg" alt="" />
                        <span class="custom-title1">
                          2025年737上半年模拟机复训
                        </span>
                        <span class="custom-title2">
                          训练日期：2024-12-21 9:00～13:00
                        </span>
                      </div>
                    </template>
                  </van-cell>
                  <van-cell center>
                    <template #title>
                      <div class="custom-valueBox">
                        <div class="custom-valueBox">
                          训练类型：飞行模拟机训
                        </div>
                        <div class="custom-valueBox">型别等级：F300</div>
                        <div class="custom-valueBox">学员：张三、李四</div>
                        <div class="custom-valueBox">技术标准：副驾驶F1</div>
                      </div>
                    </template>
                    <template #right-icon>
                      <div class="custom-valueButton" @click="gotoAssess">
                        去评估->
                      </div>
                    </template>
                  </van-cell>
                </div>
              </van-cell-group>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div
      v-if="activceIndex == 2 || activceIndex == 3"
      class="jobTabs"
      style="height: 100vh"
    >
      <van-empty description="描述文字" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const activceIndex = ref(0);

const active = ref(0);

const changeItem = (index: number): void => {
  activceIndex.value = index;
};
const value = ref('');
const gotoAssess = (): void => {
  // 路由跳转
  router.push({
    path: '/sceneChoose',
  });
};
</script>

<style scoped lang="less">
.home {
  font-size: 20px;
  width: 100%;
  font-weight: bold;
  color: #fff;
  .top_box {
    display: flex;
    justify-content: space-between;
    .top_item {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22%;
      height: 100px;
      font-size: 20px;
      background: #273368;
      img {
        height: 40px;
      }
    }
    .activeImg {
      background: url('@/assets/home/activeBackground.svg') no-repeat;
    }
  }
  .jobTabs {
    margin: 20px 0;
    :deep(.van-tab--shrink) {
      margin: 0 20px !important;
    }
    :deep(.van-tab__text) {
      font-size: 20px !important;
    }
    :deep(.van-tabs__wrap) {
      height: 65px !important;
    }
    :deep(.van-tabs__line) {
      margin-top: 20px !important;
    }
    :deep(.van-tabs__content) {
      margin-top: 20px !important;
    }
    // 检索框
    :deep(.van-search__content) {
      height: 40px;
      background: none;
    }
    :deep(.van-field__control) {
      height: 100%;
      color: #fff;
      font-size: 20px;
    }
    :deep(.van-search__field) {
      height: 100%;
    }
    :deep(.van-field__left-icon) {
      margin: 0 20px;
    }
    :deep(.van-icon-search) {
      font-size: 22px;
    }
    :deep(.van-icon-clear) {
      font-size: 22px;
    }
    .jobTabs_Body {
      padding: 10px 20px;
      .jobTabs_Body_list {
        overflow-y: auto;
        height: 500px;
        margin: 20px 0;
        .custom-cell-group {
          background-color: #161730;
          .jobTabs_Body_list_item {
            margin: 20px 0;
          }
          .custom-titleBox {
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 16px;
            .custom-title1 {
              margin: 0 10px;
            }
            .custom-title2 {
              color: #838aa8;
              font-size: 14px;
            }
          }
          .custom-valueBox {
            display: flex;
            flex-wrap: wrap;
            .custom-valueBox {
              width: 45%;
              color: #aeb2c6;
              font-size: 16px;
              text-align: right;
              margin: 10px 0;
            }
          }
          .custom-valueButton {
            width: 180px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            border-radius: 10px;
            cursor: pointer;
            background: url('@/assets/home/activeBackground.svg') no-repeat;
            background-size: cover;
            font-size: 16px;
          }
          :deep(.van-cell) {
            margin: 0 !important;
            padding: 20px;
            background-color: #283469;
          }
        }
      }
    }
  }
}
</style>
